<template>
  <div class="form_attr">
    <div v-if="type === 'kf' || type === 'kf_1'" class="monograph">
      <div class="content">
        <div class="title">
          <div class="tile_div" />
          <span>高级设置</span>
        </div>
        <div class="layout_content">
          <el-row class="mTop16" :gutter="20">
            <el-col :span="24">
              <el-input v-model="param.attr.button_text" placeholder="请输入按钮文字">
                <template slot="prepend">按钮文字</template>
              </el-input>
            </el-col>
          </el-row>
          <el-row class="mTop16" :gutter="20">
            <el-col :span="24">
              <el-input v-model="param.attr.hrefUrl" placeholder="请输入URL">
                <template slot="prepend">跳转地址</template>
              </el-input>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="content">
        <div class="title">
          <div class="tile_div" />
          <span>布局</span>
        </div>
        <div class="layout_content">
          <el-row class="mTop16" :gutter="20">
            <el-col :span="7" class="lineHeight36">按钮宽度</el-col>
            <el-col :span="10">
              <el-input-number v-model="param.attr.button_width" class="widthAuto" :min="1" :max="100" size="small" controls-position="right" />
            </el-col>
          </el-row>
          <el-row class="mTop16" :gutter="20">
            <el-col :span="7" class="lineHeight36">按钮高度</el-col>
            <el-col :span="10">
              <el-input-number v-model="param.attr.button_height" class="widthAuto" :min="1" :max="100" size="small" controls-position="right" />
            </el-col>
          </el-row>
          <el-row v-if="seatType === 'top' || seatType === 'bottom'" class="mTop16" :gutter="20">
            <el-col :span="7" class="lineHeight36">纵轴</el-col>
            <el-col :span="10">
              <el-input-number v-model="param.attr.position" class="widthAuto" :min="0" size="small" controls-position="right" />
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="content">
        <div class="title">
          <div class="tile_div" />
          <span>按钮样式</span>
        </div>
        <div class="layout_content">
          <el-row class="mTop16" :gutter="20">
            <el-col :span="9" class="lineHeight36">按钮背景颜色</el-col>
            <el-col :span="4">
              <el-color-picker v-model="param.attr.button_background" size="small" show-alpha />
            </el-col>
          </el-row>
          <el-row class="mTop16" :gutter="20">
            <el-col :span="9" class="lineHeight36">按钮边框颜色</el-col>
            <el-col :span="4">
              <el-color-picker v-model="param.attr.button_border_background" size="small" show-alpha />
            </el-col>
          </el-row>
          <el-row class="mTop16" :gutter="20">
            <el-col :span="9" class="lineHeight36">按钮字体颜色</el-col>
            <el-col :span="4">
              <el-color-picker v-model="param.attr.color_button" size="small" show-alpha />
            </el-col>
          </el-row>
          <el-row class="mTop16" :gutter="20">
            <el-col :span="9" class="lineHeight36">按钮圆角</el-col>
            <el-col :span="10">
              <el-input-number v-model="param.attr.button_border_radius" class="widthAuto" :min="1" :max="100" size="small" controls-position="right" />
            </el-col>
          </el-row>
          <el-row class="mTop16" :gutter="20">
            <el-col :span="9" class="lineHeight36">按钮边框粗细</el-col>
            <el-col :span="10">
              <el-input-number v-model="param.attr.button_border_width" class="widthAuto" :min="1" size="small" controls-position="right" />
            </el-col>
          </el-row>
          <el-row class="mTop16" :gutter="20">
            <el-col :span="9" class="lineHeight36">按钮字体大小</el-col>
            <el-col :span="10">
              <el-input-number v-model="param.attr.font_size_button" class="widthAuto" :min="1" size="small" controls-position="right" />
            </el-col>
          </el-row>
          <el-row class="mTop16" :gutter="20">
            <el-col :span="9" class="lineHeight36">按钮字体间距</el-col>
            <el-col :span="10">
              <el-input-number v-model="param.attr.letter_spacing_button" class="widthAuto" :min="1" size="small" controls-position="right" />
            </el-col>
          </el-row>
          <el-row class="mTop16" :gutter="20">
            <el-col :span="9" class="lineHeight36">按钮字体粗细</el-col>
            <el-col :span="10">
              <el-select v-model="param.attr.font_weight_button" size="small" placeholder="请选择">
                <el-option
                  label="正常"
                  value="normal"
                />
                <el-option
                  label="粗"
                  value="bold"
                />
                <el-option
                  label="更粗"
                  value="bolder"
                />
                <el-option
                  label="更细"
                  value="lighter"
                />
              </el-select>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div v-if="type === 'kf_2'" class="monograph">
      <div class="content">
        <div class="title">
          <div class="tile_div" />
          <span>背景设置</span>
        </div>
        <div class="layout_content">
          <el-row class="mTop16" :gutter="20">
            <el-col :span="6" class="lineHeight36">填充</el-col>
            <el-col :span="3">
              <el-color-picker v-model="param.attr.background" size="small" show-alpha />
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="content">
        <div class="title">
          <div class="tile_div" />
          <span>咨询按钮文案</span>
        </div>
        <div class="layout_content">
          <el-row class="mTop16" :gutter="20">
            <el-col :span="6" class="lineHeight36">提示文案</el-col>
            <el-col :span="14">
              <el-input v-model="param.attr.kf_text" class="widthAuto" :min="1" :max="100" size="small" controls-position="right" />
            </el-col>
            <el-col :span="3">
              <el-color-picker v-model="param.attr.kf_text_color" size="small" show-alpha />
            </el-col>
          </el-row>
          <el-row class="mTop16" :gutter="20">
            <el-col :span="6" class="lineHeight36">按钮文案</el-col>
            <el-col :span="14">
              <el-input v-model="param.attr.button_text" class="widthAuto" :min="1" :max="100" size="small" controls-position="right" />
            </el-col>
            <el-col :span="3">
              <el-color-picker v-model="param.attr.button_text_color" size="small" show-alpha />
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="content">
        <div class="title">
          <div class="tile_div" />
          <span>客服消息文案</span>
        </div>
        <div class="layout_content">
          <el-row class="mTop16" :gutter="20">
            <el-col :span="6" class="lineHeight36">消息标题</el-col>
            <el-col :span="14">
              <el-input v-model="param.attr.kf_tip_title" class="widthAuto" :min="1" :max="100" size="small" controls-position="right" />
            </el-col>
            <el-col :span="3">
              <el-color-picker v-model="param.attr.kf_tip_title_color" size="small" show-alpha />
            </el-col>
          </el-row>
          <el-row class="mTop16" :gutter="20">
            <el-col :span="6" class="lineHeight36">消息内容</el-col>
            <el-col :span="14">
              <el-input v-model="param.attr.kf_tip_content" class="widthAuto" :min="1" :max="100" size="small" controls-position="right" />
            </el-col>
            <el-col :span="3">
              <el-color-picker v-model="param.attr.kf_tip_content_color" size="small" show-alpha />
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="content">
        <div class="title">
          <div class="tile_div" />
          <span>咨询链接</span>
        </div>
        <div class="layout_content">
          <el-row class="mTop16" :gutter="20">
            <el-col :span="24">
              <el-input v-model="param.attr.hrefUrl" size="small" placeholder="请输入URL">
                <template slot="prepend">跳转地址</template>
              </el-input>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="content">
        <div class="title">
          <div class="tile_div" />
          <span>高级设置</span>
        </div>
        <el-switch
          v-model="param.attr.message_sum"
          active-text="显示消息数"
        />
        <br>
        <el-switch
          v-model="param.attr.animation"
          class="marTop15"
          active-text="按钮增加抖动效果"
        />
        <br>
        <el-switch
          v-model="param.attr.message_tip"
          class="marTop15"
          active-text="显示消息提示"
        />
      </div>
      <div class="content">
        <div class="title">
          <div class="tile_div" />
          <span>按钮样式</span>
        </div>
        <div class="layout_content">
          <el-row class="mTop16" :gutter="20">
            <el-col :span="6" class="lineHeight36">背景色</el-col>
            <el-col :span="3">
              <el-color-picker v-model="param.attr.button_background" size="small" show-alpha />
            </el-col>
          </el-row>
          <el-row class="mTop16" :gutter="20">
            <el-col :span="6" class="lineHeight36">边框色</el-col>
            <el-col :span="3">
              <el-color-picker v-model="param.attr.button_border_background" size="small" show-alpha controls-position="right" />
            </el-col>
          </el-row>
          <el-row class="mTop16" :gutter="20">
            <el-col :span="6" class="lineHeight36">宽度</el-col>
            <el-col :span="3">
              <el-input-number v-model="param.attr.button_width" :min="0" size="small" show-alpha controls-position="right" />
            </el-col>
          </el-row>
          <el-row class="mTop16" :gutter="20">
            <el-col :span="6" class="lineHeight36">高度</el-col>
            <el-col :span="3">
              <el-input-number v-model="param.attr.button_height" :min="0" size="small" show-alpha controls-position="right" />
            </el-col>
          </el-row>
          <el-row class="mTop16" :gutter="20">
            <el-col :span="6" class="lineHeight36">边框粗细</el-col>
            <el-col :span="3">
              <el-input-number v-model="param.attr.button_border_width" size="small" :min="0" show-alpha controls-position="right" />
            </el-col>
          </el-row>
          <el-row class="mTop16" :gutter="20">
            <el-col :span="6" class="lineHeight36">边框圆角</el-col>
            <el-col :span="3">
              <el-input-number v-model="param.attr.button_border_radius" size="small" :min="0" show-alpha controls-position="right" />
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div v-if="type === 'kf_3'" class="monograph">
      <div class="content">
        <div class="title">
          <div class="tile_div" />
          <span>咨询按钮文案</span>
        </div>
        <div class="layout_content">
          <el-row class="mTop16" :gutter="20">
            <el-col :span="6" class="lineHeight36">按钮文案</el-col>
            <el-col :span="14">
              <el-input v-model="param.attr.button_text" class="widthAuto" :min="1" :max="100" size="small" controls-position="right" />
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="content">
        <div class="title">
          <div class="tile_div" />
          <span>客服消息文案</span>
        </div>
        <div class="layout_content">
          <el-row class="mTop16" :gutter="20">
            <el-col :span="6" class="lineHeight36">消息标题</el-col>
            <el-col :span="14">
              <el-input v-model="param.attr.kf_tip_title" class="widthAuto" :min="1" :max="100" size="small" controls-position="right" />
            </el-col>
            <el-col :span="3">
              <el-color-picker v-model="param.attr.kf_tip_title_color" size="small" show-alpha />
            </el-col>
          </el-row>
          <el-row class="mTop16" :gutter="20">
            <el-col :span="6" class="lineHeight36">消息内容</el-col>
            <el-col :span="14">
              <el-input v-model="param.attr.kf_tip_content" class="widthAuto" :min="1" :max="100" size="small" controls-position="right" />
            </el-col>
            <el-col :span="3">
              <el-color-picker v-model="param.attr.kf_tip_content_color" size="small" show-alpha />
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="content">
        <div class="title">
          <div class="tile_div" />
          <span>咨询链接</span>
        </div>
        <div class="layout_content">
          <el-row class="mTop16" :gutter="20">
            <el-col :span="24">
              <el-input v-model="param.attr.hrefUrl" size="small" placeholder="请输入URL">
                <template slot="prepend">跳转地址</template>
              </el-input>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="content">
        <div class="title">
          <div class="tile_div" />
          <span>高级设置</span>
        </div>
        <el-switch
          v-model="param.attr.message_sum"
          active-text="显示消息数"
        />
        <br>
        <el-switch
          v-model="param.attr.animation"
          class="marTop15"
          active-text="按钮增加抖动效果"
        />
        <br>
        <el-switch
          v-model="param.attr.message_tip"
          class="marTop15"
          active-text="显示消息提示"
        />
      </div>
      <div class="content">
        <div class="title">
          <div class="tile_div" />
          <span>样式</span>
        </div>
        <div class="layout_content">
          <el-row class="mTop16" :gutter="20">
            <el-col :span="6" class="lineHeight36">文字色</el-col>
            <el-col :span="3">
              <el-color-picker v-model="param.attr.button_color" size="small" show-alpha />
            </el-col>
          </el-row>
          <el-row class="mTop16" :gutter="20">
            <el-col :span="6" class="lineHeight36">边框色</el-col>
            <el-col :span="3">
              <el-color-picker v-model="param.attr.button_border_background" size="small" show-alpha controls-position="right" />
            </el-col>
          </el-row>
          <el-row class="mTop16" :gutter="20">
            <el-col :span="6" class="lineHeight36">圆角</el-col>
            <el-col :span="3">
              <el-input-number v-model="param.attr.button_border_radius" :min="0" :max="40" size="small" show-alpha controls-position="right" />
            </el-col>
          </el-row>
          <el-row class="mTop16" :gutter="20">
            <el-col :span="6" class="lineHeight36">字号</el-col>
            <el-col :span="3">
              <el-input-number v-model="param.attr.button_font_size" :min="0" size="small" show-alpha controls-position="right" />
            </el-col>
          </el-row>
          <el-row class="mTop16" :gutter="20">
            <el-col :span="6" class="lineHeight36">边框粗细</el-col>
            <el-col :span="3">
              <el-input-number v-model="param.attr.button_border_width" size="small" :min="0" show-alpha controls-position="right" />
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div v-if="type === 'kf_4'" class="monograph">
      <div class="content">
        <div class="title">
          <div class="tile_div" />
          <span>咨询按钮文案</span>
        </div>
        <div class="layout_content">
          <el-row class="mTop16" :gutter="20">
            <el-col :span="6" class="lineHeight36">按钮1</el-col>
            <el-col :span="14">
              <el-input v-model="param.attr.button_text_1" class="widthAuto" :min="1" :max="100" size="small" controls-position="right" />
            </el-col>
          </el-row>
          <el-row class="mTop16" :gutter="20">
            <el-col :span="6" class="lineHeight36">按钮2</el-col>
            <el-col :span="14">
              <el-input v-model="param.attr.button_text_2" class="widthAuto" :min="1" :max="100" size="small" controls-position="right" />
            </el-col>
          </el-row>
          <el-row class="mTop16" :gutter="20">
            <el-col :span="6" class="lineHeight36">按钮3</el-col>
            <el-col :span="14">
              <el-input v-model="param.attr.button_text_3" class="widthAuto" :min="1" :max="100" size="small" controls-position="right" />
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="content">
        <div class="title">
          <div class="tile_div" />
          <span>客服消息文案</span>
        </div>
        <div class="layout_content">
          <el-row class="mTop16" :gutter="20">
            <el-col :span="6" class="lineHeight36">消息标题</el-col>
            <el-col :span="14">
              <el-input v-model="param.attr.kf_tip_title" class="widthAuto" :min="1" :max="100" size="small" controls-position="right" />
            </el-col>
            <el-col :span="3">
              <el-color-picker v-model="param.attr.kf_tip_title_color" size="small" show-alpha />
            </el-col>
          </el-row>
          <el-row class="mTop16" :gutter="20">
            <el-col :span="6" class="lineHeight36">消息内容</el-col>
            <el-col :span="14">
              <el-input v-model="param.attr.kf_tip_content" class="widthAuto" :min="1" :max="100" size="small" controls-position="right" />
            </el-col>
            <el-col :span="3">
              <el-color-picker v-model="param.attr.kf_tip_content_color" size="small" show-alpha />
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="content">
        <div class="title">
          <div class="tile_div" />
          <span>咨询链接</span>
        </div>
        <div class="layout_content">
          <el-row class="mTop16" :gutter="20">
            <el-col :span="24">
              <el-input v-model="param.attr.hrefUrl" size="small" placeholder="请输入URL">
                <template slot="prepend">跳转地址</template>
              </el-input>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="content">
        <div class="title">
          <div class="tile_div" />
          <span>高级设置</span>
        </div>
        <el-switch
          v-model="param.attr.message_sum"
          active-text="显示消息数"
        />
        <br>
        <el-switch
          v-model="param.attr.animation"
          class="marTop15"
          active-text="按钮增加抖动效果"
        />
        <br>
        <el-switch
          v-model="param.attr.message_tip"
          class="marTop15"
          active-text="显示消息提示"
        />
      </div>
      <div class="content">
        <div class="title">
          <div class="tile_div" />
          <span>按钮样式</span>
        </div>
        <div class="layout_content">
          <el-row class="mTop16" :gutter="20">
            <el-col :span="6" class="lineHeight36">特效按钮</el-col>
            <el-col :span="10">
              <el-select v-model="param.attr.button_item_num" size="small" placeholder="请选择">
                <el-option
                  label="按钮1"
                  value="1"
                />
                <el-option
                  label="按钮2"
                  value="2"
                />
                <el-option
                  label="按钮3"
                  value="3"
                />
              </el-select>
            </el-col>
          </el-row>
          <el-row class="mTop16" :gutter="20">
            <el-col :span="6" class="lineHeight36">填充色</el-col>
            <el-col :span="3">
              <el-color-picker v-model="param.attr.button_background" size="small" show-alpha />
            </el-col>
          </el-row>
          <el-row class="mTop16" :gutter="20">
            <el-col :span="6" class="lineHeight36">边框色</el-col>
            <el-col :span="3">
              <el-color-picker v-model="param.attr.button_border_background" size="small" show-alpha controls-position="right" />
            </el-col>
          </el-row>
          <el-row class="mTop16" :gutter="20">
            <el-col :span="6" class="lineHeight36">圆角</el-col>
            <el-col :span="3">
              <el-input-number v-model="param.attr.button_border_radius" :min="0" size="small" show-alpha controls-position="right" />
            </el-col>
          </el-row>
          <el-row class="mTop16" :gutter="20">
            <el-col :span="6" class="lineHeight36">字号</el-col>
            <el-col :span="3">
              <el-input-number v-model="param.attr.button_font_size" :min="0" size="small" show-alpha controls-position="right" />
            </el-col>
          </el-row>
          <el-row class="mTop16" :gutter="20">
            <el-col :span="6" class="lineHeight36">边框粗细</el-col>
            <el-col :span="3">
              <el-input-number v-model="param.attr.button_border_width" size="small" :min="0" show-alpha controls-position="right" />
            </el-col>
          </el-row>
          <el-row class="mTop16" :gutter="20">
            <el-col :span="6" class="lineHeight36">宽度</el-col>
            <el-col :span="3">
              <el-input-number v-model="param.attr.width" size="small" :min="0" show-alpha controls-position="right" />
            </el-col>
          </el-row>
          <el-row class="mTop16" :gutter="20">
            <el-col :span="6" class="lineHeight36">高度</el-col>
            <el-col :span="3">
              <el-input-number v-model="param.attr.height" size="small" :min="0" show-alpha controls-position="right" />
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="content">
        <div class="title">
          <div class="tile_div" />
          <span>背景设置</span>
        </div>
        <div class="layout_content">
          <el-row class="mTop16" :gutter="20">
            <el-col :span="6" class="lineHeight36">填充色</el-col>
            <el-col :span="3">
              <el-color-picker v-model="param.attr.background" size="small" show-alpha />
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'KfAttr',
  props: {
    type: {
      type: String,
      default: 'button'
    },
    seatType: {
      type: String,
      default: ''
    },
    param: {
      type: Object,
      default: Object
    }
  },
  data() {
    return {}
  },
  mounted() {
  },
  methods: {}
}
</script>

<style scoped>

</style>
